<template>
    <el-dialog v-model="reviewDialogVisible" title="服务评价" align-center width="40%">
        <el-form :model="reviewForm" ref="reviewFormRef" label-width="120px">
            <el-form-item label="评分">
                <el-rate v-model="reviewForm.rating" :texts="['很差', '较差', '一般', '较好', '很好']" show-text />
            </el-form-item>
            <el-form-item label="评价内容">
                <el-input type="textarea" v-model="reviewForm.content" :rows="4" placeholder="请输入您的评价内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelDialog">取消</el-button>
                <el-button type="primary" @click="submitReview">提交评价</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const reviewDialogVisible = ref(false)
const reviewForm = ref({
    orderId: null,
    userId: null,
    rating: 5,
    content: ''
})

const emit = defineEmits(['review-submitted'])

const showReviewDialog = (orderId, userId) => {
    reviewForm.value.orderId = orderId
    reviewForm.value.userId = userId
    reviewDialogVisible.value = true
}

const cancelDialog = () => {
    reviewDialogVisible.value = false
    reviewForm.value = {
        orderId: null,
        userId: null,
        rating: 5,
        content: ''
    }
}

const submitReview = async () => {
    try {
        const response = await axios.post('/api/dining/review', reviewForm.value)
        if (response.data.code === 200) {
            ElMessage.success('评价提交成功')
            emit('review-submitted')
            cancelDialog()
        } else {
            ElMessage.error(response.data.message || '评价提交失败')
        }
    } catch (error) {
        ElMessage.error('评价提交失败')
        console.error(error)
    }
}

defineExpose({
    showReviewDialog
})
</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style> 